<template>
  <div class="progress-bar-container w-full">
    <div class="flex items-center h-48 justify-between">
      <div class="flex items-center justify-between">
        <div :class="[`progress-bar-container-k-${props.type}`]">
          <div :class="[`progress-bar-container-k-${props.type}-text`]">{{ props.top }}</div>
        </div>
        <div class="color-white text-size-16 m-l-10">{{ props.label }}</div>
      </div>

      <Label3 :textBg="props.labelBg" :textSm="props.labelSm" :sm-bold="true" :gap="5" :color="typeColor.text" />
    </div>
    <div class="h-6 w-full relative" :style="{ '--progressBarWidth': progressBarWidth }">
      <div class="absolute z-99 h-6 progressBarWidth" :style="{backgroundColor: typeColor.progressBar}"></div>
      <div class="absolute h-6 w-full bg-[#243E53]"></div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import Label3 from '@/components/label/Label3.vue'
import { zwitch } from 'zwitch'

const props = defineProps({
  numeratorValue: {
    type: Number,
    default: 50
  },
  denominatorValue: {
    type: Number,
    default: 100
  },
  type: 'red' | 'blue' | 'yellow',
  top: {
    type: String,
    default: 'TOP.1'
  },
  label: String,
  labelBg: String,
  labelSm: String
})

const progressBarWidth = computed(() => {
  return props.numeratorValue / props.denominatorValue * 100 + '%'
})
const typeColor = computed(() => {
  console.log('props.type', props.type)
  const typeSwitch = zwitch('type', {
    unknown: () => '#000000',  // 如果没有匹配到，返回黑色
    invalid: () => '#FFFFFF',  // 如果输入无效，返回白色
    handlers: {
      'red': () => {
        return {
          progressBar: '#F85657',
          text: ['#FF5E5E', '#FF3939']
          // background: ['#3F1012', '#A52A2F'],
          // sc: '#FFB5B5'
        }
      },   // 当 type 为 'red' 时，返回红色
      'yellow': () => {
        return {
          progressBar: '#F85403',
          text: ['#FFC781', '#FF8400']
          // background: ['#3F1012', '#A52A2F'],
          // sc: '#FFB5B5'
        }
      }, // 当 type 为 'green' 时，返回绿色
      'blue': () => {
        return {
          progressBar: '#3363FA',
          text: ['#00F7FF', '#0084FE']
          // background: ['#3F1012', '#A52A2F'],
          // sc: '#FFB5B5'
        }
      }      // 当 type 为 'blue' 时，返回蓝色
    }
  })

  // 执行处理逻辑并返回颜色
  return typeSwitch({ type: props.type })
})
</script>

<style scoped lang="scss">
.progress-bar-container {
  &-k-red {
    width: 54px;
    height: 26px;
    background: linear-gradient(180deg, #3F1012 0%, #A52A2F 100%);
    border-radius: 0px 0px 0px 0px;
    border: 1px solid;
    border-image: linear-gradient(180deg, rgba(248, 86, 87, 1), rgba(248, 40, 41, 1)) 1 1;
    display: flex;
    align-items: center;
    justify-content: center;

    &-text {
      font-family: 'AliSemiBold';
      font-weight: normal;
      font-size: 15px;
      color: #FFB5B5;
      line-height: 18px;
      text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
      text-align: center;
      text-transform: none;
      transform: skewX(-10deg);
    }
  }

  &-k-yellow {
    width: 54px;
    height: 26px;
    background: linear-gradient(180deg, #3E3B1B 0%, #57552A 100%);
    border-radius: 0px 0px 0px 0px;
    border: 1px solid;
    border-image: linear-gradient(180deg, rgba(255, 199, 129, 1), rgba(255, 132, 0, 1)) 1 1;
    display: flex;
    align-items: center;
    justify-content: center;

    &-text {
      font-family: 'AliSemiBold';
      font-weight: normal;
      font-size: 15px;
      color: #FDCD6C;
      line-height: 18px;
      text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
      text-align: center;
      text-transform: none;
      transform: skewX(-10deg);
    }
  }

  &-k-blue {
    width: 54px;
    height: 26px;
    background: linear-gradient(180deg, #12294E 0%, #14376A 100%);
    border-radius: 0px 0px 0px 0px;
    border: 1px solid;
    border-image: linear-gradient(180deg, rgba(51, 99, 250, 1), rgba(106, 179, 249, 1)) 1 1;
    display: flex;
    align-items: center;
    justify-content: center;

    &-text {
      font-family: 'AliSemiBold';
      font-weight: normal;
      font-size: 15px;
      color: #B4C1D8;
      line-height: 18px;
      text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
      text-align: center;
      text-transform: none;
      transform: skewX(-10deg);
    }
  }

  .progressBarWidth {
    width: var(--progressBarWidth);
  }
}


.red {
  background: #FF5E5E;
}

</style>
